<template>
  <view class="customNavBar" >
    <view class="navbar">
      <!-- 状态栏 标题栏 合一页面头部-->
      <!-- 状态栏 时间 电量 胶囊-->
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <!-- 标题栏 -->
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
        <i class="iconfont icon-zuojiantou" @tap="navBack"></i>
        <view class="title">{{ props.title }}</view>
        <view>
				  	<slot name="right"></slot>
            <i :class="`iconfont ${props.iconFont1}`" v-show="props.iconFont1" @tap="rightIcon1" style="margin-right: 32rpx;"></i>
            <i :class="`iconfont ${props.iconFont}`" v-show="props.iconFont" @tap="rightIcon"></i>
        </view>
      </view>
    </view>
    <!-- 填充区域 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"> </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 引入自定义头部导航栏相关信息
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js'

const emit = defineEmits('rightIcon','rightIcon1', 'leftIcon')
const props = defineProps({
  title: {
    type: String,
    require: true,
  },
  iconFont: {
    type: String,
    default: '',
  },
  iconFont1: {
    type: String,
    default: '',
  },
})
const navBack = () => {
  uni.navigateBack()
  emit('leftIcon')
}

const rightIcon1 = () => {
  emit('rightIcon1')
}
const rightIcon = () => {
  emit('rightIcon')
}
</script>

<style lang="scss" scoped>
@import '../../static/style/index.scss';

.customNavBar {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: $z-index;
    background: $box-bg-color-white;
    box-sizing: border-box;

    .titleBar {
      padding: 0 $edition-pg;
      @include flex($align: center, $justify: space-between);

      .title {
        @include titleStyleBase;
      }
    }
  }
}
</style>